<div class="d-flex flex-items-center">
    <details class="details-reset details-overlay width-full">
        <summary class="btn" aria-haspopup="true">
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"
                class="octicon octicon-git-branch">
                <path fill-rule="evenodd"
                    d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z">
                </path>
            </svg>
            <span>{{ repo.branch }}</span>
            <div class="dropdown-caret"></div>
        </summary>
        <div class="SelectMenu">
            <div class="SelectMenu-modal">
                <header class="SelectMenu-header">
                    <h3 class="SelectMenu-title">Switch branches/tags</h3>
                    <button class="SelectMenu-closeButton" type="button">
                        <svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16"
                            height="16">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z">
                            </path>
                        </svg>
                    </button>
                </header>
                <div class="SelectMenu-filter">
                    <input class="form-control input-block" type="text" placeholder="Find or create a branch…"
                        aria-label="Find or create a branch…" />
                </div>
                <nav class="SelectMenu-tabs">
                    <button class="SelectMenu-tab" aria-selected="true">Branches</button>
                    <button class="SelectMenu-tab">Tags</button>
                </nav>
                <div class="SelectMenu-list">
                    {% for item in repo.branchArray %}
                    {% set menuitemCheched = "" %}
                    {% if item === repo.branch %}
                    {% set menuitemCheched = 'aria-checked=true' %}
                    {% endif %}
                    {% if item === "master" %}
                    {% set branchHref = user.username + "/" + repo.name %}
                    {% else %}
                    {% set branchHref = user.username + "/" + repo.name + "/tree/" + item %}
                    {% endif %}
                    <button onclick="location.href='{{ branchHref }}'" class="SelectMenu-item" role="menuitem" {{
                        menuitemCheched }}>
                        <svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z">
                            </path>
                        </svg>
                        {{ item }}
                    </button>
                    {% endfor %}
                </div>
                <div class="SelectMenu-list" hidden>
                    <button class="SelectMenu-item" role="menuitem">Tag 1</button>
                    <button class="SelectMenu-item" role="menuitem">Tag 2</button>
                    <button class="SelectMenu-item" role="menuitem">Tag 3</button>
                </div>
            </div>
        </div>
    </details>
    <details class="dropdown d-none d-md-inline-block flex-0 details-reset details-overlay d-inline-block">
        <summary class="btn btn-primary" aria-haspopup="true">
            Code
            <div class="dropdown-caret"></div>
        </summary>

        <ul class="dropdown-menu dropdown-menu-sw px-2 py-3" style="width: 378px;">
            <li class="clearfix">
                <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                    data-view-component="true" class="octicon octicon-terminal mr-2">
                    <path fill-rule="evenodd"
                        d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z">
                    </path>
                </svg>
                <span class="text-blod">Clone</span>
                <label for="git-http-url" class="d-block mt-2">http</label>
                <form>
                    <div class="input-group">
                        <input id="git-path" readonly class="form-control" value="{{ repo.git_http_path }}" type="text"
                            aria-label="git-http-url">
                        <span id="select-git-path" class="input-group-button">
                            <button class="btn" type="button" aria-label="Copy to clipboard">
                                <svg class="octicon octicon-clippy" viewBox="0 0 14 16" version="1.1" width="14"
                                    height="16" aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z">
                                    </path>
                                </svg>
                            </button>
                        </span>
                    </div>
                    <script>
                        $('#git-path').on('focus', function (e) {
                            this.select()
                        })
                    </script>
                    <script>
                        $('#select-git-path').on('click', function (e) {
                            $('#git-path').select()
                            document.execCommand("Copy", true)
                        })
                    </script>
                </form>
            </li>
        </ul>
    </details>
</div>